<template>
  <div class="border-bottom" style="padding-bottom: 5px">
    <div class="title">
      <p class="title__bd">{{title}}</p>
      <router-link :to="url">
        <p class="title__ft">查看全部&nbsp;&nbsp;&gt;</p>
      </router-link>
    </div>
    <ul class="flex">
      <router-link
        tag="li"
        class="item"
        v-for="(item,index) in freeList"
        :key="index"
        to
        @click.native.prevent="$emit('link-to', {vid: item.vid, type: item.data_type})"
      >
        <template v-if="index % 2 === 0">
          <div class="item-l">
            <img class="item-l__img" :src="item.imgUrl">
            <div class="item-l__info">
              <p class="i-l__title">{{item.title}}</p>
              <p class="i-l__free">{{item.type}}</p>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="item-r">
            <img class="item-r__img" :src="item.imgUrl">
            <div class="item-r__info">
              <p class="i-r__title">{{item.title}}</p>
              <p class="i-r__free">{{item.type}}</p>
            </div>
          </div>
        </template>
      </router-link>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "HomeItemTwo",
    props: {
      title: {
        type: String
      },
      type: {
        type: String | Number,
        default: 0
      },
      list: {
        type: Array,
        default: () => []
      },
      url: {
        type: String | Object,
        default: ""
      }
    },
    computed: {
      freeList() {
        console.log("TCL: freeList -> this.list", this.list);
        return this.list;
      }
    }
  };
</script>
<style lang="less" scoped>
  @import "~less/mixins.less";
  @import "~less/variable.less";

  .title {
    .title();
    margin-top: 20px;
    font-weight: 600;
  }
  .flex {
    display: flex;
  }
  .item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    &:last-child {
      .home-border-bottom();
    }
    &-l,
    &-r {
      flex: 1;
      .box-shadow();
    }
    &-l {
      margin-right: 15px;
    }
    &-l__img,
    &-r__img {
      width: 100%;
      height: 110px;
      object-fit: cover;
      border-radius: 10px 10px 0 0;
      background: #ccc;
    }
    &-l__info,
    &-r__info {
      .i-l__title,
      .i-r__title {
        font-weight: 600;
        .ellipsis-mult(2);
        margin-bottom: 10px;
        margin-left: 5px;
        font-size: 14px;
        color: #333;
      }
      .i-l__free,
      .i-r__free {
        margin-right: 6px;
        font-family: @font-pfb;
        font-size: 14px;
        padding-bottom: 10px;
        padding-right: 4px;
        text-align: right;
        color: #dc376d;
        font-weight: 600;
      }
    }
  }
</style>
